<style lang="less" scoped>
    .phone_cont {
        dispalay: flex;
        flex-direction: column;
        .vux-flexbox {
            background: #fff;
            padding: 0.28rem 0 0.32rem;
            .vux-flexbox-item {
                .flex-demo {
                    img {
                        width: 100%;
                    }
                }
                span {
                    display: block;
                    text-align: center;
                    margin-top: 0.16rem;
                }
            }
        }
    }
    .arr_g_box{
        background: #fff;
        padding: 0.28rem;
        height: auto;
        width: 100%;
        overflow: hidden;
        overflow-x: scroll;
    }
    .arr_box{
        position: relative;
        z-index: 100;
        background: #fff;
        padding: 0.28rem;
        overflow: hidden;
        white-space: nowrap;
        overflow-x: scroll;
        .arr_s_box{
            display: inline-block;
            height:1rem;
            div{
                margin-right: 0.4rem;
                *{
                    display: block;
                    text-align: center;
                }
            }
            img{
                height: 1rem;
                width: 1.1rem;
                margin-bottom: 0.16rem;
            }
            span{
                font-size: 0.24rem;
                color: #646464;
            }
        }
        .arr_s_box:last-child{
            div{
                margin-right: 0;
            }
        }
    }
</style>
<template>
    <div>
            <!--<div class="arr_box">
                <div class="arr_s_box" v-for="(dom,index) in arr" :key="index">
                    <div class="" @click="getShopList(dom) ">
                        <img v-lazy="{src:dom.img,loadImg:classifyLoadImg,error:classifyLoadImg}" alt="">
                        <span>{{dom.name}}</span>
                    </div>
                </div>
            </div>-->
        <scroller class="phone_cont" :on-refresh="refresh" :on-infinite="loadFlag ? load: getDone" ref="myscroller">
            <!--<v-product :shopingList="data.list"></v-product>-->
            <div style="padding-bottom: 1rem;">
                <v-product :list="list" style="padding-bottom: 0"></v-product>
                <load-more v-show="!loadFlag" :show-loading="false" tip='我是有底线的' background-color="#fbf9fe" ></load-more>
            </div>
        </scroller>
    </div>
</template>
<script>
    import {mapActions, mapState} from 'vuex'
    import {Tab, TabItem, Flexbox, FlexboxItem, Divider, LoadMore} from 'vux'
    export default {
        components: {
            Tab, TabItem, Flexbox, FlexboxItem, Divider, LoadMore
        },
        props: ['type'],
        data: function () {
          return {
              loadFlag: false,
              classifyLoadImg:require('../../assets/img/classify_loadImg.png'),
              scrollPos: 0
          }
        },
        mounted:function(){
            this.scrollPos = 0
            // setTimeout(()=>{
            //     this.categories.obj.forEach( (v,i) =>{
            //         if(v.code == this.$route.query.type){
            //             this.arr = this.categories.obj[i].childProductCategoryInfos
            //         }
            //     } )
            // }, 50)
        },
        activated(){
            // this.loadFlag = false
            if(this.scrollPos > 0){
                setTimeout(()=>this.$refs.myscroller.scrollTo(0,this.scrollPos, false), 10)
            }
        },
        deactivated(){
            this.scrollPos = this.$refs.myscroller.getPosition().top
        },
        methods: {
            getShopList(dom){
                this.Interactive.customStatistics({type: 1, eventID: 'sub_category',label: dom.name})
                this.$router.push({path: '/collage/classify', query: {code: dom.code,name: dom.name, type: this.$route.query.type}})
            },
          /*  updateDom(){
                if(this.$route.query.type){
                    this.arr = [];
                    this.categories.obj.forEach( (v,i) =>{
                        if(v.code == this.$route.query.type){
                            this.arr = this.categories.obj[i].childProductCategoryInfos
                        }
                    } )
                }
            },*/
            updateLoadMore(type){
                this.loadFlag = type;
            },
            refresh(done){
                this.$emit("getLists",[done], true);
                global.myLoad = true
                this.$refs.myscroller.resize()
            },
            scrollTo(to){
                this.$refs.myscroller.scrollTo(0, to, false)
            },
//			上拉加载
            load(done){
                this.$emit("getLists",[done,'add'], true);
                global.myLoad = true
                this.$refs.myscroller.resize()
            },
            getDone(done){
                this.$refs.myscroller.finishInfinite(2);
            }
        },
        watch:{
        },
        computed: {
            ...mapState({categories:state =>state.categories,list: state => state.shareList.obj}),
            arr : function(){
                console.log(this.$props.type)
                var arr = []
                this.categories.obj.forEach( (v,i) =>{
                    console.log(v.code)
                    if(v.code == this.$props.type){
                        arr = this.categories.obj[i].childProductCategoryInfos
                    }
                } )
                console.log(arr)
                return arr
            }
        },
    }
</script>


